import React, { useState } from 'react';
import { Card, Row, Col, Button, Typography, Tag, Divider, Statistic, Input, message, Modal } from 'antd';
import { CrownOutlined, ThunderboltOutlined, StarOutlined, PlusOutlined, QrcodeOutlined, WechatOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;
const TOKEN_PRICE = 0.1; // 1 token = 0.1元

const VipService: React.FC = () => {
  const [customToken, setCustomToken] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [payInfo, setPayInfo] = useState<{ token: number; amount: string }>({ token: 0, amount: '0.00' });

  const handleShowModal = (token: number, amount: string) => {
    setPayInfo({ token, amount });
    setModalOpen(true);
  };

  const handleCustomRecharge = () => {
    const tokenNum = Number(customToken);
    if (!customToken || isNaN(tokenNum) || tokenNum <= 0) {
      message.error('请输入有效的token数量');
      return;
    }
    handleShowModal(tokenNum, (tokenNum * TOKEN_PRICE).toFixed(2));
  };

  const tokenNum = Number(customToken);
  const customAmount = !isNaN(tokenNum) && tokenNum > 0 ? (tokenNum * TOKEN_PRICE).toFixed(2) : '0.00';

  return (
    <div className="hide-scrollbar" style={{ maxHeight: 'calc(100vh - 120px)', overflowY: 'auto', overflowX: 'hidden' }}>
      {/* 顶部统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="当前身份"
              value="普通用户"
              prefix={<CrownOutlined style={{ color: '#1a365d' }} />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="Token余额"
              value={0}
              prefix={<ThunderboltOutlined style={{ color: '#1a365d' }} />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="充值历史"
              value={0}
              prefix={<StarOutlined style={{ color: '#1a365d' }} />}
            />
          </Card>
        </Col>
      </Row>

      {/* 基础套餐卡片 */}
      <Title level={3} style={{ marginBottom: 24 }}>Token充值套餐</Title>
      <Row gutter={[24, 24]}>
        <Col span={6}>
          <Card hoverable style={{ textAlign: 'center', minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <Title level={2} style={{ color: '#1a365d' }}>100</Title>
              <Text type="secondary">Token</Text>
              <Divider />
              <Title level={4} style={{ color: '#2c5282' }}>¥10</Title>
              <div style={{ margin: '16px 0', minHeight: 32 }}>
                <Tag color="blue">入门体验</Tag>
              </div>
            </div>
            <Button type="primary" block style={{ height: 48, marginTop: 'auto', marginBottom: 24, background: 'linear-gradient(90deg, #1a365d 0%, #2c5282 100%)', border: 'none' }}
              onClick={() => handleShowModal(100, '10.00')}
            >
              立即充值
            </Button>
          </Card>
        </Col>
        <Col span={6}>
          <Card hoverable style={{ textAlign: 'center', minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <Title level={2} style={{ color: '#1a365d' }}>500</Title>
              <Text type="secondary">Token</Text>
              <Divider />
              <Title level={4} style={{ color: '#2c5282' }}>¥45</Title>
              <div style={{ margin: '16px 0', minHeight: 32 }}>
                <Tag color="green">高性价比</Tag>
                <Tag color="gold">推荐</Tag>
              </div>
            </div>
            <Button type="primary" block style={{ height: 48, marginTop: 'auto', marginBottom: 24, background: 'linear-gradient(90deg, #1a365d 0%, #2c5282 100%)', border: 'none' }}
              onClick={() => handleShowModal(500, '45.00')}
            >
              立即充值
            </Button>
          </Card>
        </Col>
        <Col span={6}>
          <Card hoverable style={{ textAlign: 'center', minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <Title level={2} style={{ color: '#1a365d' }}>1000</Title>
              <Text type="secondary">Token</Text>
              <Divider />
              <Title level={4} style={{ color: '#2c5282' }}>¥80</Title>
              <div style={{ margin: '16px 0', minHeight: 32 }}>
                <Tag color="red">最受欢迎</Tag>
                <Tag color="purple">超值</Tag>
              </div>
            </div>
            <Button type="primary" block style={{ height: 48, marginTop: 'auto', marginBottom: 24, background: 'linear-gradient(90deg, #1a365d 0%, #2c5282 100%)', border: 'none' }}
              onClick={() => handleShowModal(1000, '80.00')}
            >
              立即充值
            </Button>
          </Card>
        </Col>
        {/* 自定义充值 */}
        <Col span={6}>
          <Card hoverable style={{ textAlign: 'center', minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <Title level={2} style={{ color: '#1a365d' }}><PlusOutlined /></Title>
              <Text type="secondary">自定义Token</Text>
              <Divider />
              <Input
                type="number"
                min={1}
                placeholder="输入token数量"
                value={customToken}
                onChange={e => setCustomToken(e.target.value)}
                style={{ marginBottom: 12 }}
              />
              <div style={{ marginBottom: 8 }}>
                <Text type="secondary">应付金额：</Text>
                <Text strong style={{ color: '#2c5282', fontSize: 18 }}>¥{customAmount}</Text>
              </div>
            </div>
            <Button 
              type="primary" 
              block 
              style={{ height: 48, marginTop: 'auto', marginBottom: 24, background: 'linear-gradient(90deg, #1a365d 0%, #2c5282 100%)', border: 'none' }} 
              onClick={handleCustomRecharge}
            >
              立即充值
            </Button>
          </Card>
        </Col>
      </Row>

      {/* 会员特权说明 */}
      <Title level={3} style={{ marginTop: 48, marginBottom: 24 }}>Token会员特权</Title>
      <Row gutter={[24, 24]}>
        <Col span={12}>
          <Card>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div>
                <Title level={4}>按需消费</Title>
                <Text type="secondary">充值多少用多少，灵活不浪费</Text>
              </div>
              <div>
                <Title level={4}>高级功能解锁</Title>
                <Text type="secondary">使用token可体验更多高级功能</Text>
              </div>
              <div>
                <Title level={4}>专属客服支持</Title>
                <Text type="secondary">7*24小时专业客服团队支持</Text>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div>
                <Title level={4}>数据安全保障</Title>
                <Text type="secondary">企业级数据加密，保障数据安全</Text>
              </div>
              <div>
                <Title level={4}>专属功能定制</Title>
                <Text type="secondary">根据需求定制专属功能</Text>
              </div>
              <div>
                <Title level={4}>定期功能更新</Title>
                <Text type="secondary">优先体验新功能，持续优化体验</Text>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 充值弹窗 */}
      <Modal
        open={modalOpen}
        onCancel={() => setModalOpen(false)}
        footer={null}
        centered
        title="微信支付"
      >
        <div style={{ textAlign: 'center', padding: 16 }}>
          <WechatOutlined style={{ fontSize: 40, color: '#09bb07', marginBottom: 8 }} />
          <div style={{ margin: '16px 0' }}>
            <Title level={4} style={{ marginBottom: 0 }}>充值 {payInfo.token} Token</Title>
            <Text type="secondary">应付金额：<span style={{ color: '#1a365d', fontWeight: 600 }}>¥{payInfo.amount}</span></Text>
          </div>
          <div style={{ margin: '24px 0' }}>
            <QrcodeOutlined style={{ fontSize: 80, color: '#b3b3b3' }} />
            <div style={{ color: '#888', marginTop: 8 }}>请使用微信扫码支付</div>
          </div>
          <Button type="primary" block onClick={() => setModalOpen(false)}>
            支付完成
          </Button>
        </div>
      </Modal>
    </div>
  );
};

export default VipService;